<template name="skeletonHome">
    <view class="skeleton_home_container tabbar_padding_b" @touchmove.stop.prevent="() => {}">
        <view class="skeleton_loading"></view>
        <view class="group1"></view>
        <view class="group2"></view>
        <view class="group3">
            <view class="group3_item" v-for="i in 6" :key="`k${i}`">
                <view class="group3_item_top"></view>
                <view class="group3_item_bottom">
                    <view class="group3_item_bottom_box1"></view>
                    <view class="group3_item_bottom_box2"></view>
                    <view class="group3_item_bottom_box3">
                        <view class="group3_item_bottom_box3_left"></view>
                        <view class="group3_item_bottom_box3_right"></view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.skeleton_home_container {
    position: relative;
    top: 99px;
    left: 0;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: transparent;
    .group1 {
        width: 100%;
        height: 400rpx;
        margin-bottom: 33rpx;
        background: #eeeeee;
    }
    .group2 {
        width: 168rpx;
        height: 36rpx;
        background: #eeeeee;
        margin-bottom: 27rpx;
    }
    .group3 {
        padding: 0 29rpx 29rpx;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 18rpx;
        .group3_item {
            .group3_item_top {
                height: 300rpx;
                background-color: #eeeeee;
            }
            .group3_item_bottom {
                padding: 24rpx 18rpx 33rpx;
                background-color: #fff;
                .group3_item_bottom_box1 {
                    width: 100%;
                    height: 29rpx;
                    background-color: #eeeeee;
                    margin-bottom: 11rpx;
                }
                .group3_item_bottom_box2 {
                    width: 205rpx;
                    height: 29rpx;
                    margin-bottom: 27rpx;
                    background-color: #eeeeee;
                }
                .group3_item_bottom_box3 {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .group3_item_bottom_box3_left {
                        width: 96rpx;
                        height: 33rpx;
                        background: #eeeeee;
                    }
                    .group3_item_bottom_box3_right {
                        width: 54rpx;
                        height: 54rpx;
                        border-radius: 50%;
                        background: #eeeeee;
                    }
                }
            }
        }
    }
}
</style>
